//获取圆心指示框的id
const progress = document.getElementById('progress')
// 获取上一步的按钮
const prev = document.getElementById('prev')
// 获取下一步的按钮
const next = document.getElementById('next')
// 获取所有小球元素
const circles = document.querySelectorAll('.circle')
// 定义一个初始步骤值，就是开始值
let currentActive=1
// 给下一步加点击事件
next.addEventListener('click',()=>{
  currentActive++
  // 如果值大于长度就把小球总数的长度赋值给变量值，因为继续++的话已经没有小球了
  if(currentActive>circles.length) {
    currentActive=circles.length
  }
  update()
})
// 给上一步加点击事件
prev.addEventListener('click',()=>{
  currentActive--
  // 如果值大于长度就把小球总数的长度赋值给变量值，因为继续++的话已经没有小球了
  if(currentActive<1) {
    currentActive=1
    prev.style.disabled= false
  }
  update()
})
// 点击按钮的更新函数
function update() {
  circles.forEach((circle,index)=>{
    // 如果下标小于当前值，当前元素添加acyive样式
    if(index<currentActive) {
      circle.classList.add('active')
    }else {
      // 这个意思就是索引大于当前值，说明还没点击到索引对应的小球，那么就不能 给索引对应的小球渲染样式
      circle.classList.remove('active')
    }
    // 获取所有加了active的集合
    const actives = document.querySelectorAll('.active')
    // 设置蓝色进度条的宽度
    // 当处于第一个位置时，active为1 减去1 就是0 总长度-1就是分成了中间三份 
    // 当active有两个被渲染，长度为2，所以渲染1和2中间的那条线，就是1/3 =33.33%
    progress.style.width=(actives.length-1)/(circles.length -1)*100+'%'
    if(currentActive ===1) {
      prev.disabled = true
    }else if(currentActive === circles.length){
      next.disabled = true
    }else {
      prev.disabled = false
      next.disabled = false
    }

  })
  }